<template>
	<view class="component-placeholder">
		<view class="placeholder-content">
			<view class="placeholder-icon">⏳</view>
			<text class="placeholder-text">组件加载中...</text>
		</view>
	</view>
</template>

<script>
export default {
	name: "placeholder",
	data() {
		return {
			
		}
	}
}
</script>

<style scoped>
.component-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100rpx;
	padding: 20rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	margin: 10rpx;
}

.placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0.6;
}

.placeholder-icon {
	font-size: 32rpx;
	margin-bottom: 10rpx;
	animation: rotate 1s linear infinite;
}

.placeholder-text {
	font-size: 24rpx;
	color: #666;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 